<template>
  <view :class="['toast', toastCustom]">
    <view class="toast-content">{{message}}</view>
    <view :class="['toast-arrow', toastArrowCustom]"></view>
  </view>
</template>
 
<script setup>
import { onLaunch, onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { reactive, ref, toRefs, watch, onMounted, onUnmounted, getCurrentInstance } from "vue"
const props = defineProps({
  message: String,
  toastCustom: Object,
  toastArrowCustom: Object
})
const {message, toastCustom, toastArrowCustom} = toRefs(props)
</script>
 
<style lang="scss" scoped>
.toast {
  position: absolute;
  top: -122rpx;
  left: -86rpx;
  transform: translateX(-50%);
  background: rgba(6,6,6,0.7);
  color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  z-index: 1001;
  width: 280rpx;
}
 
.toast-content {
  position: relative;
  font-size: 20rpx;
  z-index: 1;
}
 
.toast-arrow {
  position: absolute;
  bottom: -18rpx;
  right: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  border-top: 20rpx solid rgba(6,6,6,0.7);
  z-index: -1;
}
</style>